import React, { useEffect, useRef, useState } from "react";
import "./index.scss";
import { chickenSoup } from "../data.js";
export default function Right() {
  const [isScroll, setIsScroll] = useState(true);
  const domRef = useRef(null);
  const dome1 = useRef(null);
  const dome2 = useRef(null);
  const timer = useRef(null);

  const moveTop = () => {
    if (dome1.current?.offsetHeight - domRef.current.scrollTop <= 0) {
      //当滚动至dome1于dome2交界时
      domRef.current.scrollTop -= dome1.current.offsetHeight; //dome跳到最顶端
    } else {
      domRef.current.scrollTop = domRef.current.scrollTop + 1;
    }
  };

  // 鼠标移进 移出
  const hoverHandler = (value) => {
    setIsScroll(value);
  };
  useEffect(() => {
    if (isScroll) {
      timer.current = setInterval(moveTop, 60);
    }

    return () => {
      timer.current && clearInterval(timer.current);
    };
  }, [isScroll]);
  return (
    <div className="right">
      <div className="header">
        <div className="h-title">
          <span>猛男必备</span>
        </div>
        <div className="content" ref={domRef}>
          <ul ref={dome1}>
            {chickenSoup.length >= 0 &&
              chickenSoup.map((item) => (
                <li
                  key={item.id}
                  onMouseOver={() => hoverHandler(false)}
                  onMouseLeave={() => hoverHandler(true)}
                >
                  <span>{item.id}</span>、<span>{item.value}</span>
                </li>
              ))}
          </ul>
          <ul ref={dome2}>
            {chickenSoup.length >= 0 &&
              chickenSoup.map((item) => (
                <li
                  key={item.id}
                  onMouseOver={() => hoverHandler(false)}
                  onMouseLeave={() => hoverHandler(true)}
                >
                  <span>{item.id}</span>、<span>{item.value}</span>
                </li>
              ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
